<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>woodwhales-music</title>
    <meta name="robots" content="index, follow">
    <meta name="keywords" content="woodwhales,music,woodwhales-music,music-player,音乐播放器,开源音乐播放器"/>
    <meta name="author" content="woodwhales.cn"/>
    <meta name="robots" content="index,all"/>
    <meta name="description" content="woodwhales-music是一个基于SpringBoot开发的轻量级简洁音乐播放器，可视化后台管理可做到独立自主可控音乐信息">
    <link th:if="admin != null" rel="canonical" th:href="${admin != null ? admin?.bannerLinkUrl: 'https://woodwhales.cn'}"/>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="stylesheet" th:href="@{css/stylesheets/style.css}">
    <link rel="stylesheet" th:href="@{css/my-css.css}">
    <script th:src="@{js/jquery-1.7.2.min.js}"></script>
    <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</head>

<body>
<div id="content">
    <div id="player">
        <a th:if="${home !=null && home.gitHubCornersShow !=null && home.gitHubCornersShow}"
           th:href="${home !=null ? home.gitHubCornersUrl : 'https://github.com/woodwhales/woodwhales-music'}" target="_blank" class="github-corner" aria-label="woodwhales-music">
            <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;  z-index: 9000" aria-hidden="true">
                <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
                <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
            </svg>
        </a>
        <div class="cover"></div>
        <div class="ctrl">
            <div class="tag">
                <strong>Title</strong>
                <span class="artist">Artist</span>
                <span class="album">Album</span>
            </div>
            <div class="control">
                <div class="left">
                    <div class="rewind icon"></div>
                    <div class="playback icon"></div>
                    <div class="fastforward icon"></div>
                </div>
                <div class="volume right" id="volumeDiv">
                    <div class="mute icon left"></div>
                    <div class="slider left">
                        <div class="pace"></div>
                    </div>
                </div>
            </div>
            <div class="progress">
                <div class="slider">
                    <div class="loaded"></div>
                    <div class="pace"></div>
                </div>
                <div class="timer left">0:00</div>
                <div class="right">
                    <div class="repeat icon"></div>
                    <div class="shuffle icon"></div>
                </div>
            </div>
        </div>
    </div>
    <ul id="playlist"></ul>
</div>
<footer id="footer">
    <div id="friendly"></div>
    <div class="webSiteInfo" id="siteStatistics">
    访问人次：<span style="margin-right: 8px" th:text="${visits !=null ? visits?.count : 1}"></span>点击人次：<span th:text="${clicks !=null ? clicks?.count : 1}"></span>
    </div>
    <div class="webSiteInfo">
        powered by<a href="https://github.com/woodwhales/woodwhales-music" target="_blank" style="margin-left: 8px;"
                    th:text="'woodwhales-music:' + ${product !=null ? product ?.productVersion : '3.7.5'}"></a>
    </div>
    <div>
        &copy; <span style="margin-right: 8px;" id="dateContainer"></span><a th:href="${home !=null ? home?.authorName : 'woodwhales.cn'}" target="_blank" th:text="${home !=null ? home?.authorName : 'woodwhales.cn'}"></a>
    </div>
    <button id="to-top">
        <svg t="1731134386109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="862" width="100%" height="100%"><path d="M514.7 101.6c-228.3 0-413.3 185.1-413.3 413.3s185.1 413.3 413.3 413.3c228.2 0.1 413.3-185 413.3-413.2S742.9 101.6 514.7 101.6zM385.5 320.5h246.2c11.6 0 21.1 9.2 21.1 20.6 0 11.4-9.4 20.6-21.1 20.6H385.5c-11.6 0-21.1-9.2-21.1-20.6 0-11.4 9.4-20.6 21.1-20.6z m267.4 245.1c-10.2 9.9-26.7 9.9-36.8 0l-86.4-84.2v219.7c0 11.4-9.4 20.6-21.1 20.6-11.6 0-21.1-9.2-21.1-20.6V481.3l-86.4 84.2c-10.2 9.9-26.7 9.9-36.8 0-10.2-9.9-10.2-26 0-35.9L490.1 407s0-0.1 0.1-0.1c5.1-5 11.8-7.4 18.4-7.4 6.7 0 13.3 2.5 18.4 7.4 0 0 0 0.1 0.1 0.1l125.8 122.7c10.2 9.9 10.2 25.9 0 35.9z" fill="#aaa" p-id="863"></path></svg>
    </button>
</footer>
<script th:src="@{js/jquery-ui-1.8.17.custom.min.js}"></script>
<script th:src="@{js/script.js}"></script>
<script th:inline="javascript">
    let friendlyInfos = [[${home !=null ? home?.friendlyInfos : null}]]
    $(function () {
        let footerElement = document.getElementById("dateContainer");
        footerElement.innerHTML = new Date().getFullYear()

        showFriendly(friendlyInfos)

        //获取窗口宽度
        let winWidth;
        if (window.innerWidth) {
            winWidth = window.innerWidth;
        } else if ((document.body) && (document.body.clientWidth)) {
            winWidth = document.body.clientWidth;
        }

        if(winWidth <= 700) {
            $('#volumeDiv').hide();
        }

        playMusic([[${musicInfoList}]]);
    });

    $(window).resize(function() {
        //获取窗口宽度
        let winWidth;
        if (window.innerWidth) {
            winWidth = window.innerWidth;
        } else if ((document.body) && (document.body.clientWidth)) {
            winWidth = document.body.clientWidth;
        }

        if(winWidth <= 700) {
            $('#volumeDiv').hide();
        } else if(winWidth > 700) {
            $('#volumeDiv').show();
        }
    });

    const footer = document.getElementById('footer');
    const content = document.getElementById('content');
    const toTop = document.getElementById('to-top');

    document.addEventListener('DOMContentLoaded', () => {
        function adjustContentPadding() {
            content.style.paddingBottom = `${footer.offsetHeight}px`;
        }
        adjustContentPadding();
        window.addEventListener('resize', adjustContentPadding);
    });

    window.addEventListener('scroll', () => {
        const footerHeight = footer.getBoundingClientRect().height;
        if (window.scrollY > footerHeight) {
            toTop.style.display = 'block';
        } else {
            toTop.style.display = 'none';
        }
    });

    toTop.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

</script>
</body>
</html>
